<template>
    <div class="body_background" :style="GetWindowBackground">
        <div class="body_background padding-top10">
            <div class="top-info-box block-box">
                <div class="status-name main-color big-font-size font-weight">已通过</div>
                <div class="order-time-box small-font-size three-color">
                    <div>退款单号：434464</div>
                    <!--如果是待发货，就隐藏-->
                    <div>通过时间：2021-05-09 11:11:11</div>
                </div>
            </div>
            <div class="order-delivery-list block-box">
                <div class="three-color delivery-title">退款单</div>
                <div class="order-content-list-box">
                    <div class="order-content-box"
                         v-for="(item,index) in goodsList"
                         :key="item.id"
                    >
                        <img :src="item.imgUrl"/>
                        <div class="order-info-box">
                            <div class="main-color big-font-size">{{item.id}}--{{item.title}}</div>
                            <div class="three-color small-font-size">订单号：254545</div>
                            <div class="second-color small-font-size">X 12 (4箱)</div>
                        </div>
                        <div class="second-color small-font-size goods-count">-￥<span
                                class="big-font-size">6000</span></div>
                    </div>
                </div>
                <div class="order-delivery-content-box">
                    <div class="content-item three-color">
                        <div>退款方式：</div>
                        <div>战三</div>
                    </div>
                    <div class="content-item three-color">
                        <div>退款金额：</div>
                        <div>￥900</div>
                    </div>
                    <div class="content-item three-color">
                        <div class="white-space">退款原因：</div>
                        <div class="align-left">这里是退款原因</div>
                    </div>
                </div>
            </div>
            <!--已发货显示-->
            <div class="block-box contact-box main-color">
                <img src="../../assets/img/tel.png">
                <div class="">联系商家</div>
            </div>
            <!--<mt-button class="deliver-goods background" @click="deliverGoodsFun">发货</mt-button>-->
        </div>
    </div>
</template>

<script>
    import {Toast, Button} from 'mint-ui';

    export default {
        name: "GoodsDeliveryList",
        data() {
            return {
                id: '',
                GetWindowBackground: {
                    'min-height': ''
                },
                goodsList: [
                    {
                        id: 1,
                        title: "秘制小番茄500g",
                        spec: '500g/袋',
                        weight: '500g',
                        warehouse: '常温',
                        num: 0,
                        imgUrl:
                            "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
                    }, {
                        id: 2,
                        title: "秘制小番茄500g",
                        spec: '500g/袋',
                        weight: '500g',
                        warehouse: '常温',
                        num: 0,
                        imgUrl:
                            "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
                    }, {
                        id: 3,
                        title: "秘制小番茄500g",
                        spec: '500g/袋',
                        weight: '500g',
                        warehouse: '常温',
                        num: 0,
                        imgUrl:
                            "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
                    }, {
                        id: 4,
                        title: "秘制小番茄500g",
                        spec: '500g/袋',
                        weight: '500g',
                        warehouse: '常温',
                        num: 0,
                        imgUrl:
                            "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
                    }, {
                        id: 5,
                        title: "秘制小番茄500g",
                        spec: '500g/袋',
                        weight: '500g',
                        warehouse: '常温',
                        num: 0,
                        imgUrl:
                            "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
                    }
                ],
            }
        },
        mounted() { //自动加载
            this.id = this.$route.query.id;
            console.log(this.id)
        },
        methods: {
            getHeight() {
                // 获取浏览器高度，减去顶部搜索栏和导航栏的值 55 + 50（可动态获取）,再减去底部高度值60
                this.GetWindowBackground['min-height'] = window.innerHeight + 'px'
            },
            //发货
            deliverGoodsFun() {
                console.log('发货-id:' + this.id)
            },
        },
        // 生命周期 - 创建完成（可以访问当前this实例）
        created() {
            window.addEventListener('resize', this.getHeight) // 注册监听器
            this.getHeight() // 页面创建时先调用一次
        },
        // 生命周期 - 销毁完成
        destroyed() {
            window.removeEventListener('resize', this.getHeight)
        },
    }
</script>

<style lang="scss" scoped>
    .top-info-box {
        width: calc(100% - 40px);
        padding: 10px;
        div {
            padding: 2px;
        }
        .order-time-box {
            text-align: left;
        }
    }

    .padding-top10 {
        padding-bottom: 20px;
    }

    .order-delivery-list {
        display: flex;
        flex-direction: column;
        .order-content-list-box {
            width: 100%;
            margin-bottom: 10px;
        }
        .delivery-title {
            width: 100%;
            font-size: 14px;
            text-align: left;
            margin-bottom: 8px;
        }
        .order-content-box {
            width: 100%;
            display: flex;
            padding: 10px 0;
            img {
                width: 60px;
                height: 60px;
                margin-right: 10px;
                border-radius: 1px;
            }
            .order-info-box {
                /*width: calc(100% - 80px);*/
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                text-align: left;
            }
            .goods-count {
                display: flex;
                align-items: center;
                margin-left: auto;
            }
        }
        .order-delivery-content-box {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            border-top: 1px dashed #D2D6DC;
            padding-top: 10px;
            .content-item {
                width: 100%;
                min-height: 30px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 13px;
            }
        }
    }

    .contact-box {
        display: flex;
        flex-direction: row;
        padding: 10px 20px;
        img {
            margin-right: 10px;
            width: 25px;
            height: 25px;
        }
    }

    .deliver-goods {
        width: 70%;
        margin-top: 10px;
        font-size: 15px;
        color: #fff;
    }

</style>